<!DOCTYPE html>
<html>
    <head>
        <title>Play-iOS</title>
        <meta name="viewport" content="user-scalable=no, width=device-width">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="apple-mobile-web-app-status-bar-style" content="black">
        <link rel="apple-touch-icon" href="ios/apple-touch-icon-57x57.png">
        <link rel="apple-touch-icon" sizes="72x72" href="ios/apple-touch-icon-72x72.png">
        <link rel="apple-touch-icon" sizes="114x114" href="ios/apple-touch-icon-114x114.png">
        <link rel="apple-touch-startup-image" href="ios/startup.png">

        <link rel="stylesheet" href="ios/style.css">
        <script src="mootools.js"></script>
        <script src="touch.js"></script>
        <script src="websockets.js"></script>
        <script src="ios/pairing.js"></script>
        <script src="ios/sensors.js"></script>
        <script>
            window.addEvent("domready", function() {
                if(!window.navigator.standalone) {
                    $$("#numbers button").setStyle("height", "1.5em");
                    document.id("pairingnumber").setStyle("font-size", "1em");
                }

                $$("a").addEvent("touch", function(e) {
                    e.stop();
                    var id = this.get("id");
                    var body = document.id(document.body);
                    if(id == "endgame") {
                        body.set("class", "paired");
                        socket.send("$unload");
                    } else {
                        body.set("class", "ingame");
                        socket.send("$load:" + id);
                    }
                });
            });
        </script>
    </head>
    <body>
        <h1>WebSocket iOS client</h1>
        <noscript>Sorry, you need JavaScript for WebSockets.</noscript>
    <section id="nowebsocket">Sorry, your browser doesn't support WebSockets.</section>
    <section id="noconnection">
        No connection to host.
        <button id="reconnect">Try again</button>
    </section>
    <section id="pairing">
        Pairing number:
        <div id="pairingnumber"></div>
        <div id="numbers">
            <button class="number">7</button>
            <button class="number">8</button>
            <button class="number">9</button>
            <button class="number">4</button>
            <button class="number">5</button>
            <button class="number">6</button>
            <button class="number">1</button>
            <button class="number">2</button>
            <button class="number">3</button>
            <button id="back">⌫</button>
            <button class="number">0</button>
            <button id="ok">OK</button>
        </div>
    </section>
    <section id="paired">
        <p>
            <a href="" id="debug">Start Debugger</a>
        </p>
        <p>
            <a href="" id="pipeflow">Play Pipeflow</a>
        </p>
    </section>
    <section id="ingame">
        <p>
            <a href="" id="endgame">Select New</a>
        </p>
    </section>
</body>
</html>